<template>
  <div class="content">
    <!--工序列表弹窗-->
    <el-dialog
      v-dialogDrag
      :title="$t('menu.outsourcingList')"
      model
      :visible.sync="isgroupDialog"
      :close-on-click-modal="false"
      width="60%"
      :before-close="handleClose"
    >
      <div class="materiel-form">
        <search
          :options="selectData"
          :msg="tacitly"
          @seek="collect"
          @hand="processData"
        />
        <el-button
          type="primary"
          class="btn"
          size="mini"
          @click="groupSearch"
        >
          {{ $t('btn.search') }}
        </el-button>
      </div>
      <jc-table
        :table-data="tableData"
        :table-header="tableHeader"
        table-height="53vh"
        serial
        @clickRow="groupSelectRow"
      />
      <jc-pagination
        v-show="group.total > 0"
        :total="group.total"
        :page.sync="group.pageNum"
        :limit.sync="group.pageSize"
        @pagination="processData"
      />
    </el-dialog>
  </div>
</template>
<script>
import { queryWorkshopGroupDetailList } from '@/api/processLibrary'
import search from '@/components/Search'
import searData from '@/components/Search/mixin'
export default {
  components: {
    search
  },
  mixins: [searData],
  props: {
    msg: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      ftype: 14,
      fbillNo: 'fprocessname', // 工序名称
      // 工序列表数据分页
      isgroupDialog: true,
      group: {
        groupId: this.msg,
        fprocessname: '',
        total: 0, // 总条目
        pageNum: 1, // 当前页
        pageSize: 20 // 每页显示多少条数据
      },
      tableData: [],
      tableHeader: [
        { label: this.$t('market.processnumber'), prop: 'fprocessname', minWidth: '120px' },
        { label: this.$t('market.processname'), prop: 'fprocessnumber', minWidth: '120px' },
        { label: this.$t('shop.price'), prop: 'fprice', minWidth: '120px' },
        { label: this.$t('market.note'), prop: 'fremark', minWidth: '120px' }
      ],
      prodValue: {}
    }
  },
  created() {
    this.processData()
  },
  methods: {
    // 列表数据
    processData() {
      const DATA = {
        ...this.group,
        search: this.searCollData
      }
      queryWorkshopGroupDetailList(DATA).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.list
          this.group.total = res.data.total
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 工序弹窗选中
    groupSelectRow(item) {
      this.prodValue = item
      this.$emit('group', this.prodValue)
    },
    groupSearch() {
      this.group.pageNum = 1
      this.processData()
    },
    // 关闭前回调
    handleClose() {
      this.$emit('group', this.prodValue)
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  @include listBom;
  .materiel-form{
    position: relative;
    bottom: 10px;
    .btn {
      margin-left: 460px;
      transform: translateY(5px);
    }
  }
}
</style>
